<template>
  <div class="container">
    <h1 style="text-align: center">表格合并</h1>
    <el-table
      :data="tableData"
      :span-method="flag ? fn : arraySpanMethod"
      border
      style="width: 100%"
      @cell-click="cellClick"
      :cell-class-name="tableCellClassName"
    >
      <el-table-column prop="age" label="年龄" width="200"></el-table-column>
      <el-table-column label="金额" width="50">
        <el-table-column label="千" prop="amount2" width="50">
          <template slot-scope="scope">
            <span v-if="flag">{{ scope.row.amount2 }}</span>
            <div v-else>
              <el-input
                :ref="`input${scope.$index}`"
                v-if="rowIndex == scope.$index"
                v-model="scope.row.num"
                @blur="handleBlur"
                @input="handleInput"
                @change="handleChange(scope, $event)"
                maxlength="10"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="amount1" width="50" label="百">
        </el-table-column>
        <el-table-column prop="amount0" width="50" label="十">
        </el-table-column>
      </el-table-column>
      <el-table-column label="金额" width="50">
        <el-table-column label="千" prop="amount5" width="50">
          <template slot-scope="scope">
            <span v-if="flag">{{ scope.row.amount5 }}</span>
            <div v-else>
              <el-input
                :ref="`input${scope.$index}`"
                v-model="scope.row.num2"
                @blur="handleBlur"
                @input="handleInput"
                @change="handleChange(scope, $event)"
                maxlength="10"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="amount4" width="50" label="百">
        </el-table-column>
        <el-table-column prop="amount3" width="50" label="十">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="" width="100" label="操作">
        <template slot-scope="scope">
          <el-button type="" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { message } from 'element-ui'
export default {
  // name: 'MergeTable',
  data () {
    return {
      val: '',
      tableData: [{
        age: 12,
        num: '123',
        num2: '',
        amount2: '',
        amount2: '',
        amount0: '',
        amount3: '',
        amount4: '',
        amount5: '',
      }, {
        age: 13,
        num: '456',
        num2: '',
        amount2: '',
        amount2: '',
        amount0: '',
        amount3: '',
        amount4: '',
        amount5: '',
      }
      ],
      flag: false,
      judge: false,
      rowIndex: 0
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    handleEdit (row) {
      console.log('row: ', row)

    },
    tableCellClassName ({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
    handleInput (val) {

    },
    handleBlur (val) {

      this.flag = true
    },

    handleChange (scope, val) {
      const { $index } = scope
      console.log('scope: ', scope)
      console.log('val: ', val)
      console.log('val: ', val.length)
      this.flag = true
      let arr = val.split('')
      console.log('arr: ', arr.length)
      // 没有小数点
      if (arr.some(item => item === '.')) {
        console.log('有小数点')
        let index = val.indexOf('.')
        arr = arr.slice(0, index)
        console.log('arr: ', arr)
        let newVal = val.slice(index + 1)
        console.log('index: ', index)
        console.log('newVal: ', newVal)
        if (newVal.length === 0) {
          arr.push('0')
          arr.push('0')
        } else if (newVal.length === 1) {
          arr.push(newVal.toString())
          arr.push('0')
        } else {
          arr.push((newVal.slice(0, 1)).toString())
          arr.push((newVal.slice(1, 2)).toString())
        }
        console.log('arr: ', arr)

        // return false
        console.log('arr: ', arr)
        let num = 9 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`amount${arr.length - 1 - index}`] = item
        })
      } else {
        console.log('没有小数点')
        let num = 7 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`amount${arr.length + 1 - index}`] = item
        })
        this.tableData[$index].amount0 = this.tableData[$index].amount1 = '0'
        console.log('this.tableData: ', this.tableData)
      }
    },
    cellClick (row, column, cell, event) {
      console.log('column: ', column);
      this.rowIndex = row.index
      if (!this.flag) return false
      // const arr = [
      //   'amount2',
      //   'amount1',
      //   'amount0',
      //   'amount4',
      //   'amount5',
      //   'amount3'
      // ]
      // if (arr.some(item => item === column['property'])) {
      //   this.flag = false
      // }
      if (
        column['property'] == 'amount2' ||
        column['property'] == 'amount1' ||
        column['property'] == 'amount0'
      ) {
        this.flag = false
        this.judge = true
      }

      if (
        column['property'] == 'amount4' ||
        column['property'] == 'amount5' ||
        column['property'] == 'amount3'
      ) {
        this.flag = false
        this.judge = false
      }


      const { label } = column
      let labelArr = [
        // '百万',
        // '十万',
        // '万',
        '千',
        '百',
        '十',
        // '元',
        // '角',
        // '分',
      ]
      if (labelArr.some(item => item == label)) {
        this.$nextTick(() => {
          // this.$refs[`input${row.index}`].focus()
        })
      }
    },

    fn ({ row, column, rowIndex, columnIndex }) {
      return {
        rowspan: 1,
        colspan: 1
      }
    },

    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 第一个十百
      // debugger
      if (this.judge) {
        if (columnIndex === 1) {
          return [1, 3]
        } else if (
          columnIndex == 2 ||
          columnIndex == 3 ||
          columnIndex == 4
        ) {
          return [0, 0]
        }
      } else {
        if (columnIndex === 1) {
          return [4, 6]
        } else if (
          columnIndex == 5 ||
          columnIndex == 6 ||
          columnIndex == 6
        ) {
          return [0, 0]
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
